<template>
  <h1>简单K线图</h1>
  <hr />
  <div id="bottom"></div>
</template>

<script lang="ts" setup>
// 发送请求，获取K线图数据
import { reactive ,inject,onMounted,toRaw } from 'vue';
import { data_kData } from '../../../utils/api';
var $echarts:any = inject("echarts");
onMounted(()=>{
  // 发送请求获取K线图数据
  let KData:any=reactive([])
data_kData().then(res=>{
  KData.push(res.data.data)
  const kdata=toRaw(KData)
  console.log(kdata);
  
  console.log(kdata[0].val[0])
  let myChart = $echarts.init(document.getElementById("bottom"));
  myChart.setOption({
    tooltip: {
      trigger: "axis",
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    toolbox: {
      feature: {
        saveAsImage: {},
      },
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: kdata[0].x,
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        type: "line",
        stack: "Total",
        data: kdata[0].val[0]
      },
      {
        type: "line",
        stack: "Total",
        data:  kdata[0].val[1]
      },
      {
        type: "line",
        stack: "Total",
        data: kdata[0].val[2]
      },
      {
        type: "line",
        stack: "Total",
        data:  kdata[0].val[3]
      },   
    ],
  });
})
})
  
// 定义变量接收数据


</script>

<style scoped>
#bottom {
  height: 500px;
}
</style>